import React, {Component} from "react"
import {createAppContainer} from "react-navigation"
import {createBottomTabNavigator,BottomTabBar} from "react-navigation-tabs";
import MaterialIcons from "react-native-vector-icons/MaterialIcons"
import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons"
import Index from "../pages/index"
import Game from "../pages/Game"
import User from "../pages/User"
import {connect} from "react-redux";
import Header from "../Components/Header"
import {View,Text} from "react-native";

const NAVIGATOR = {
    HomePage:{
        screen:Index,
        navigationOptions:{
            tabBarLabel:"首页",
            header:()=>Header,
            tabBarIcon:(option:any = {tintColor:null,focused:null})=>(
                <MaterialCommunityIcons
                    name={'home-outline'}
                    size={24}
                    style={{color:option.tintColor}}
                />
            )
        }
    },
    GamePage:{
        screen:Game,
        navigationOptions:{
            headerTitle:"游戏",

            tabBarLabel:"游戏",
            tabBarIcon:(option:any = {tintColor:null,focused:null})=>(
                <MaterialCommunityIcons
                    name={'gamepad-variant-outline'}
                    size={24}
                    style={{color:option.tintColor}}
                />
            )
        }
    },
    UserPage:{
        screen:User,
        navigationOptions:{
            tabBarLabel:"账户",
            tabBarIcon:(option:any = {tintColor:null,focused:null})=>(
                <MaterialIcons
                    name={'person-outline'}
                    size={24}
                    style={{color:option.tintColor}}
                />
            )
        }
    },
};
interface Props{

}

class DynamicTabNavigation extends Component<Props> {
    public props:any;
    constructor(props:Props){
        super(props)
    }
    /**
     * 通过tabNavigator定制需要显示的组件  从NAVIGATOR中选取
     * @returns {NavigationContainer}
     * @private
     */
    _createNavBar(){
        // const {GamePage,HomePage,UserPage} = NAVIGATOR;
        // const tabNavigator = {HomePage,GamePage,UserPage};
        /** 返回一个底部导航 */
        return createBottomTabNavigator(NAVIGATOR,{
            // tabBarComponent: TabBarComponent //对底部导航进行控制   基于react-native-tabs组件  TabBarComponent:用于控制react-navigation-tabs的组件

            tabBarComponent:props=>{
                return <TabBarComponent
                    {...props}
                    theme={this.props.theme}

                />
            }
        });
    }
    render() {
        const Tab = createAppContainer(this._createNavBar());
        return <Tab />;
    }
}
class TabBarComponent extends Component{
    public theme:any;
    public props:any;
    constructor(props:Props){
        super(props);
        //定义一个属性,保存BottomTabBar的属性
        this.theme = {
            tintColor:this.props.theme,
            updateTime:new Date().getTime()
        }
    }
    render() {
        return <BottomTabBar
            {...this.props}
            activeTintColor={this.props.theme} //activeTintColor赋值
        />;
    }
}
const mapStateToProps=(state:any)=>{
    return({
        theme:state.theme.theme
    })
}
export default connect(mapStateToProps)(DynamicTabNavigation)
